<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>视频列表</title>
		<link rel="stylesheet" href="../src/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../dist/css/common.css" />
	</head>

	<body>
		<div class="layui-fluid">
			<div class="w-title"><span class="w-blueline"></span>
				<a href="###">视频列表</a>
			</div>
			<div class="layui-row">
				<div class="layui-col-md1">&nbsp;</div>
				<div class="layui-col-md4">
					<div class="layui-form-item">
						<label class="layui-form-label">所属基地</label>
						<div class="layui-input-block">
							<select name="city" lay-verify="">
								<option value="">请选择</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-col-md1">&nbsp;</div>
				<div class="layui-col-md4">
					<div class="layui-form-item">
						<label class="layui-form-label">所属分区</label>
						<div class="layui-input-block">
							<select name="city" lay-verify="">
								<option value="">请选择</option>
							</select>
						</div>
					</div>
				</div>

			</div>
			<div class="layui-row">
				<div class="layui-col-md1">&nbsp;</div>
				<div class="layui-col-md4">
					<div class="layui-form-item">
						<label class="layui-form-label">设备名称</label>
						<div class="layui-input-block">
							<input type="text" name="" id="" value="" />
						</div>
					</div>
				</div>
				<div class="layui-col-md1">&nbsp;</div>
				<div class="layui-col-md4">
					<div class="layui-form-item">
						<label class="layui-form-label">设备类型</label>
						<div class="layui-input-block">
							<select name="city" lay-verify="">
								<option value="">请选择</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-col-md2 alignright">
					<a href="###" class="layui-btn">查询</a>
					<a href="###" class="layui-btn">重置</a>
					<a target="iframe" href="sptj.html" class="layui-btn">添加</a>
				</div>
			</div>
			<table id="demoTable" lay-filter="test"></table>
		</div>
		<script src="../src/layui.js"></script>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">申请</a>
			<a class="layui-btn layui-btn-primary  layui-btn-xs" lay-event="del">修改</a>
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">删除</a>
		</script>
		<script>
			layui.use(['table', 'jquery'], function() {
				var table = layui.table;
				var $ = jQuery = layui.$;
				//第一个实例
				table.render({
					elem: '#demoTable',
					//					height: 315
					//  ,url: '/demo/table/user/' //数据接口
					//						,
					page: true //开启分页
						,
					cols: [
						[ //表头
							{
								field: 'xh',
								title: '序号',
								width: '10%',
								sort: true,
								align: 'center',
								fixed: 'left'
							}, {
								field: 'spmc',
								title: '视频名称',
								align: 'center',
								width: '10%'
							}, {
								field: 'yhm',
								title: '用户名',
								align: 'center',
								width: '10%',
								sort: true
							}, {
								field: 'ml',
								title: '码流',
								align: 'center',
								width: '10%'
							}, {
								field: 'splx',
								title: '视频类型',
								align: 'center',
								width: '10%'
							}, {
								field: 'dk',
								title: '端口',
								width: '10%',
								align: 'center',
							}, {
								field: 'shzt',
								title: '审核状态',
								width: '10%',
								align: 'center',
							}, {
								field: 'sfsyxs',
								title: '是否首页显示',
								width: '10%',
								align: 'center',
							}, {
								field: 'cz',
								title: '操作',
								width: '20%',
								align: 'center',
								toolbar: '#barDemo'
							}
						]
					],
					data: [{
						"xh": "1",
						"spmc": "大棚卷帘控制柜",
						"yhm": "棚区12号",
						"ml": "主码流",
						"splx": "海康",
						"dk": "8888",
						"shzt": "未审核",
						"sfsyxs": "关闭",
						"cz": "",
					}, {
						"xh": "2",
						"spmc": "大棚卷帘控制柜",
						"yhm": "棚区12号",
						"ml": "主码流",
						"splx": "海康",
						"dk": "8888",
						"shzt": "未审核",
						"sfsyxs": "关闭",
						"cz": "",
					}]
				});
				$('.demoTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
			});
		</script>
	</body>

</html>